<html>

<head>
    <title>simple-mvvm</title>
    <!-- 引用jquery 以及 jquery-tmpl -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script src="simple-mvvm.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
    <div class="form-horizontal" role="form" data-context="TestController">
        <div class="form-group">
            <legend>Form title</legend>
        </div>
        <div class="form-group">
            <div class="col-sm-6 col-sm-offset-2">
                <table class="col-sm-6 table table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                    </thead>
                    <tbody bind-template="list">
                        <tr>
                            <td>${index}</td>
                            <td>${first}</td>
                            <td>${last}</td>
                            <td>${email}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-sm-6 col-sm-offset-2">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                    弹窗
                </button>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-context="ModalController">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <div class="col-sm-6 col-sm-offset-2">
                                    <input type="text" class="form-control" bind-val="stu.age,format=format" style="margin:5px 0" />
                                    <p bind-html="desc" style="margin:5px 0"></p>
                                    <input type="range" min="10" max="300" bind-val="stu.age" step="10" class="form-control" style="margin:5px 0" />
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" data-page="1" on-click="update">查询</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        var TestController = {
            data: {
                list: [
                    { index: 1, first: 'Mark', last: 'Otto', email: '@mdo' },
                    { index: 2, first: 'Jacob', last: 'Thornton', email: '@fat' },
                    { index: 3, first: 'Larry', last: 'Thornton', email: '@twitter' },
                ]
            },
            format: function (val) {
                return val + '岁'
            },
            update: function () {
            }
        }

        var ModalController = {
            data: {
                stu: {
                    name: 'xiaoming',
                    age: 3,
                },
                desc: function () {
                    return 'my name is ' + this.stu.name + '<br/> my age is' + this.stu.age

                }
            },
            init: function () {
            },
            created: function () {
                //TODO
            },
            format: function (val) {
                return val + ' likes looking little movie. he should take care of his body'
            },
            update: function () {
                this.stu = {
                    name: 'this is a test',
                    age: 18
                }
            }

        }
        $('body').controller()

    </script>




</body>

</html>